<template>
  <div style="overflow: hidden; height: 44px">
    <el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen">
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="16"
        ><div class="grid-content bg-purple">
          <el-button-group>
            <el-button
              :type="classtype1"
              @click="selecttype('classtype1', 2, 12)"
              >单屏</el-button
            >
            <el-button
              :type="classtype2"
              @click="selecttype('classtype2', 6, 8)"
              >四分屏</el-button
            >
            <el-button
              :type="classtype3"
              @click="selecttype('classtype3', 12, 6)"
              >九分屏</el-button
            >
            <el-button
              :type="classtype4"
              @click="selecttype('classtype4', 24, 4)"
              >十六分屏</el-button
            >
            <el-tooltip
              :content="fullscreen ? `取消全屏` : `全屏`"
              placement="bottom"
            >
              <el-button
                @click="handleFullScreen"
                icon="el-icon-rank"
              ></el-button>
            </el-tooltip>
          </el-button-group>
        </div>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>

    <div class="center">
      <el-container class="container">
        <el-main>
          <el-row :gutter="10">
            <el-col
              v-for="(n, index) in fornum"
              :xs="24"
              :sm="24"
              :md="clonum"
              :lg="clonum"
              :xl="clonum"
              :class="videoclass"
              :key="index"
            >
              <span>
                {{ index + 1 }}
              </span>
              <div
                class="player-wrapper"
                element-loading-text="加载中..."
                element-loading-background="#000"
              >
                <div
                  class="video-wrapper"
                  :style="videoclass"
                  :id="`videoid${n}`"
                >
                  <div
                    class="video-inner live hide-waiting"
                    style="
                      position: absolute;
                      top: 0px;
                      bottom: 0px;
                      left: 0px;
                      right: 0px;
                    "
                  >
                    <div class="alt table-c">
                      <div class="talbetop">
                        <div class="videoBox">
                          <video class="video" src="../video/test.mp4"></video>
                        </div>
                        <button
                          v-show="true"
                          class="selectchannel"
                          @click="dialogFormVisible = true"
                        >
                          选择通道
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
    <el-dialog title="选择视频" :visible.sync="dialogFormVisible">
      这是测试
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dome",
  data() {
    return {
      fullscreen: false,
      fornum: 24,
      clonum: 4,
      dialogFormVisible: false,
      videoclass:
        "width:100%; padding-top: 56.25%; position: relative; margin: auto; overflow: hidden;",
      classtype1: "",
      classtype2: "",
      classtype3: "",
      classtype4: "primary",
      items: [false, false, false, false],
    };
  },
  created() {
    let that = this;
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        that.fullscreen = false;
        for (let n = 1; n <= that.fornum; n++) {
          document.getElementById("videoid" + n).style =
            "width:100%; padding-top: 56.25%;  position: relative; margin: auto; overflow: hidden;";
        }
      } else {
        for (let n = 1; n <= that.fornum; n++) {
          document.getElementById("videoid" + n).style =
            "width:100%; padding-top: 56.25%; position: relative; margin: auto; overflow: hidden;";
        }
      }
    };
  },
  methods: {
    selecttype(item, fnum, clo) {
      this.items = [];
      for (let i = 0; i < fnum; i++) {
        this.items[i] = false;
      }
      this.fornum = fnum;
      this.clonum = clo;

      if (item === "classtype1") {
        this.classtype1 = "primary";
        this.classtype2 = "";
        this.classtype3 = "";
        this.classtype4 = "";
      } else if (item === "classtype2") {
        this.classtype1 = "";
        this.classtype2 = "primary";
        this.classtype3 = "";
        this.classtype4 = "";
      } else if (item === "classtype3") {
        this.classtype1 = "";
        this.classtype2 = "";
        this.classtype3 = "primary";
        this.classtype4 = "";
      } else if (item === "classtype4") {
        this.classtype1 = "";
        this.classtype2 = "";
        this.classtype3 = "";
        this.classtype4 = "primary";
      }
    },
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      let that = this;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style scoped>
body {
  overflow-x: hidden;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.video-wrapper {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.alt {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  /* color: #fff; */
  text-align: center;
}
.alt table {
  width: 100%;
  height: 100%;
}
.talbetop {
  width: 100%;
  height: 100%;
  position: relative;
}
.videoBox {
  width: 100%;
  height: 100%;
}
.selectchannel {
  color: #fff;
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: rgba(255, 0, 0, 0);
}
.video-close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fff;
  font-size: 12px;
  background-color: hsla(0, 0%, 50%, 0.5);
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.center {
  position: absolute;
  left: 0;
  top: 44px;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.table-c table {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table-c table td {
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
}
.player-wrapper {
  padding-bottom: 10px;
}
.grid-content {
  text-align: center;
}
</style>